<script setup>
import { ref, watch } from 'vue'
import NavComponent from './nav-component.vue'
import * as echarts from 'echarts'
const props = defineProps(['operationData'])
const timebar = ref('周')
const timeList = ref(['周', '月'])
const optionData = {
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '2%',
    right: '3%',
    bottom: '2%',
    top: '16%',
    containLabel: true
  },
  legend: {
    data: ['飞行架次', '飞行时长'],
    textStyle: {
      fontSize: 10,
      color: 'rgb(167,177,187)'
    },
    right: '22%'
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['14:20', '14:30', '14:40', '14:50', '14:60'],
      axisLabel: {
        interval: 0,
        textStyle: {
          color: 'rgba(255,255,255,.7)'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      },
      axisTick: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '单位：台',
      splitNumber: 3,
      // max: 400,
      nameTextStyle: {
        padding: [0, 10, 0, 0],
        color: 'rgba(255,255,255,.7)'
      },
      axisLabel: {
        textStyle: {
          color: 'rgba(255,255,255,.7)'
        },
        formatter: '{value}'
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.2)'
        }
      }, //设置网格
      axisTick: {
        show: false
      }
    },
    {
      type: 'value',
      name: '单位：h',
      // max: 40,
      splitNumber: 3,
      nameTextStyle: {
        padding: [0, 0, 0, 10],
        color: 'rgba(255,255,255,.7)'
      },
      axisLabel: {
        textStyle: {
          color: 'rgba(255,255,255,.7)'
        },
        formatter: '{value}'
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.2)'
        }
      }, //设置网格
      axisTick: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '飞行架次',
      type: 'line',
      showSymbol: false,
      smooth: true,
      symbolSize: 8,
      yAxisIndex: 0,
      lineStyle: {
        color: '#3CE4E8'
      },
      itemStyle: {
        // 设置symbol的颜色
        normal: {
          color: '#3CE4E8'
        }
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(60, 228, 232, 0.5)'
          },
          {
            offset: 1,
            color: 'rgba(60, 228, 232, 0)'
          }
        ])
      },
      data: [120, 230, 380, 280, 180]
    },
    {
      name: '飞行时长',
      type: 'line',
      yAxisIndex: 1,
      smooth: true,
      showSymbol: false,
      symbolSize: 8,
      lineStyle: {
        color: '#FFF37C'
      },
      itemStyle: {
        // 设置symbol的颜色
        normal: {
          color: '#FFF37C'
        }
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(255, 243, 124, 0.5)'
          },
          {
            offset: 1,
            color: 'rgba(255, 243, 124, 0)'
          }
        ])
      },
      data: [12, 22, 18, 24, 12]
    }
  ]
}
const option = ref(optionData)
const data = ref()
const navBar = ref('无人机')
const navList = ref(['无人机', '有人机'])

// 响应子组件点击tab
const clickNavBar = (item) => {
  navBar.value = item
  setOption(props.operationData)
}

// 切换单位
const changeTimeBar = (val) => {
  timebar.value = val
  setOption(props.operationData)
}

const type = [
  { navBar: '周', timebar: '有人机', type: 'peopleFlyCountForWeekList' },
  { navBar: '周', timebar: '无人机', type: 'nopeopleFlyCountForWeekList' },
  { navBar: '月', timebar: '有人机', type: 'peopleFlyCountForMonthList' },
  { navBar: '月', timebar: '无人机', type: 'nopeopleFlyCountForMonthList' }
]
// 设置Charts数据
const setOption = (val) => {
  const chartStype = type.find(
    (item) => item.navBar === timebar.value && item.timebar === navBar.value
  )?.type
  const monthArr = val[chartStype]?.map((i) => i.month)
  const timeArr = val[chartStype]?.map((i) => i.flyTime)
  const flyCount = val[chartStype]?.map((i) => i.flyCount)
  option.value.xAxis[0].data = monthArr
  option.value.series[1].data = timeArr
  option.value.series[0].data = flyCount
}

watch(props, (val) => {
  data.value = val.operationData
  setOption(val.operationData)
})
</script>
<template>
  <div class="card">
    <div class="top">
      <div class="tab">
        <NavComponent :navBar="navBar" :navList="navList" @clickNavBar="clickNavBar"></NavComponent>
      </div>
      <div class="timebar">
        <p
          v-for="(item, index) in timeList"
          :key="index"
          :class="{ active: timebar == item }"
          @click="changeTimeBar(item)"
        >
          {{ item }}
        </p>
      </div>
    </div>
    <div class="chart">
      <Charts :option="option" container="6" />
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .tab {
      width: 200px;
    }
  }
}
.chart {
  height: 225px;
  //   padding: 0 10px;
}
.timebar {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  // margin-top: 10px;

  p {
    width: 60px;
    height: 37px;
    text-align: center;
    line-height: 37px;
    margin-left: 10px;
    background: url('@img/overview/timebar.png');
    background-size: 100% 100%;
    color: #a7b1bb;
    cursor: pointer;

    &.active {
      background: url('@img/overview/timebar_active.png');
      background-size: 100% 100%;
      color: #fff;
    }
  }
}
</style>
